<!--
  Generated template for the Chat page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>{{toUser.name}}</ion-title>
  </ion-navbar>

</ion-header>

<ion-content #content>

  <div class="message-wrap">

    <div *ngFor="let msg of msgList" class="message" [ngClass]="{'left': msg.userId !== user.id, 'right': msg.userId === user.id}">
      <img class="user-img" [src]="msg.userAvatar" alt="" src="">
      <ion-spinner name="dots" *ngIf="msg.status === 'pending'"></ion-spinner>
      <div class="msg-detail">
        <div class="msg-info">
          <p>
            {{msg.userName}}&nbsp;&nbsp;&nbsp;{{msg.time | relativeTime}}</p>
        </div>
        <div class="msg-content">
          <span class="triangle"></span>
          <img *ngIf="msg.photo" (click)="photoBrowser(msg)" [src]="msg.photo" />
          <div *ngIf="!msg.photo" [innerHTML]="msg.message"></div>
        </div>
      </div>
    </div>

  </div>

</ion-content>

<ion-footer no-border [style.height]="showEmojiPicker ? '255px' : '55px'" [keyboardAttach]="content">

  <ion-grid class="input-wrap">
    <ion-row>
      <ion-col col-2>
        <button ion-button clear icon-only item-right (click)="switchEmojiPicker()">
            <ion-icon name="md-happy"></ion-icon>
        </button>
      </ion-col>
      <ion-col col-2>
        <button ion-button clear icon-only item-right (click)="sendImage()">
            <ion-icon name="md-images"></ion-icon>
        </button>
      </ion-col>
      <ion-col col-6>
        <ion-textarea #chat_input placeholder="Text Input" [(ngModel)]="editorMsg" (keyup.enter)="sendMsg()" (focus)="onFocus()">
        </ion-textarea>
      </ion-col>
      <ion-col col-2>
        <button ion-button clear icon-only item-right (click)="sendMsg()">
            <ion-icon name="md-send" ></ion-icon>
        </button>
      </ion-col>
    </ion-row>
  </ion-grid>
  <emoji-picker *ngIf="showEmojiPicker" [(ngModel)]="editorMsg"></emoji-picker>
</ion-footer>
